<script setup>
  import { onMounted, ref, computed } from 'vue'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import infomask from '../txDraw/component/infomask.vue'
  import { useUsercodeStore } from '@/store/usercode.js'
  import dayjs from 'dayjs'
  import PayBox from '../../components/PayBox.vue'
  const createOrderUrl = ref('createBoxOrder')

  const blindboxId = ref()
  const boxId = ref()
  //弹幕
  const barrageTopInfo = ref([])
  const barrageBottomInfo = ref([])
  // 三个轮播
  const threeAction = ref([])
  // 概率展示
  const showProbality = ref([])
  //商品
  const goodsList = ref([])
  const boxDetailInfo = ref()
  // 优惠券
  const couponId = ref('')
  const couponname = ref('')
  const couponType = ref(-1)
  const timeValue = ref(0)
  // 盲盒详情
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: 0,
      },
    })
    // console.log(res)
    boxId.value = res.data.box.id
    // 弹幕
    res.data.log.forEach((item, index) => {
      if (index <= Math.floor(res.data.log.length / 2)) {
        barrageTopInfo.value.push(item)
      } else {
        barrageBottomInfo.value.push(item)
      }
    })
    // console.log(barrageBottomInfo.value.length != 0)
    //三个轮播
    for (let i = 0; i < res.data.goods_info.length; i++) {
      threeAction.value.push(res.data.goods_info[i])
    }
    // 概率展示
    showProbality.value = res.data.box.probability_show
    //商品
    goodsList.value = res.data.goods_info
    boxDetailInfo.value = res.data.box
    boxDetailInfo.value = res.data.box
    if (is_khOpen.value) {
      clearInterval(intervalId)
      timeValue.value = +dayjs(res.data.box.s_time) - +dayjs()
      intervalId = setInterval(() => {
        timeValue.value = timeValue.value - 1000
      }, 1000) // 每秒增加count的值
    }
  }

  // 三个轮播
  setInterval(() => {
    let firstElement = threeAction.value.shift()

    // 将该元素添加到数组的末尾
    threeAction.value.push(firstElement)
  }, 6000)

  //去我的奖品
  function toMyReward() {
    uni.reLaunch({
      url: '/pages/bag/index',
    })
  }

  // 规则
  const rulepopup = ref()

  function rulePOP() {
    getRules(4)
    rulepopup.value.open('bottom')
  }

  // 出奖记录
  const currentId = ref(1)
  const historyPage = ref(1)
  const historyList = ref([])
  const historypopup = ref()

  function wxHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
    historypopup.value.open('bottom')
  }

  function closeHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    historypopup.value.close('bottom')
  }

  async function getHistoryList() {
    const res = await http.request({
      url: '/api/box/winLog',
      method: 'POST',
      data: {
        page: historyPage.value,
        limit: 10,
        rule_id: currentId.value,
        id: boxId.value,
      },
    })
    // console.log(res)
    historyList.value = [...historyList.value, ...res.data]
  }

  //切换历史记录
  function getItemHistoryList(id) {
    if (currentId.value == id) {
      return
    }
    currentId.value = id
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
  }

  //触底刷新
  function historyListLower() {
    ++historyPage.value
    getHistoryList()
  }

  // 支付
  const paypopup = ref()
  const paypopupBool = ref(false)
  const paymoney = ref()
  //有优惠券的jiage
  const realmoney = ref()
  const buyCount = ref(0)
  let intervalId = null

  function timeTxt(dateDiff) {
    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //天数

    var leave1 = dateDiff % (24 * 3600 * 1000) //剩余毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000)) //小时

    var leave2 = leave1 % (3600 * 1000) //剩余毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000)) //分钟

    var leave3 = leave2 % (60 * 1000) //剩余毫秒数
    var seconds = Math.floor(leave3 / 1000) //秒

    var leave4 = leave3 % 1000 //剩余毫秒数
    // var fenseconds = Math.floor(leave4 / 10) //分秒
    const hourstxt = hours < 10 ? '0' + hours : hours
    const minutestxt = minutes < 10 ? '0' + minutes : minutes
    const secondstxt = seconds < 10 ? '0' + seconds : seconds
    return hourstxt + ':' + minutestxt + ':' + secondstxt
  }
  const is_khOpen = computed(() => {
    if (boxDetailInfo.value) {
      const timeBool = +dayjs() < +dayjs(boxDetailInfo.value.s_time)
      // console.log(
      //   +dayjs(boxDetailInfo.value.s_time),
      //   timeBool,
      //   boxDetailInfo.value.isMiaowa == 1,
      //   boxDetailInfo.value.is_kh_open == 1,
      //   '+dayjs(boxDetailInfo.value.s_time)+dayjs(boxDetailInfo.value.s_time)'
      // )
      if (
        boxDetailInfo.value.isMiaowa == 1 &&
        timeBool &&
        boxDetailInfo.value.is_kh_open == 1
      ) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  })
  // const agree = ref(true)
  async function payPOP(count) {
    const userCodeStore = useUsercodeStore()
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }

    paypopup.value.open('bottom')
    paypopupBool.value = true
    paymoney.value = (boxDetailInfo.value.price * count).toFixed(2)
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
    buyCount.value = count
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)

  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  //支付radio
  const currentradio = ref(3)

  function radioChange(evt) {
    currentradio.value = evt.detail.value
  }

  // 天选抽奖
  const haveDraw = ref([])
  // 星石支付

  function payReturnFun(res) {
    // console.log(res)
    if (res.st == 1) {
      paypopup.value.close()
      paypopupBool.value = false
      for (let obj of res.data.box_goods) {
        // console.log('11111111抽到传说，抽到传说抽到传说抽到传说1111111', obj)
        if (obj.rule_id == 1) {
          // console.log('抽到传说，抽到传说抽到传说抽到传说')
          getblindboxDetail()
        }
      }
      toactivity(res)
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      uni.utils.toast(res.msg)
    }
  }
  function toactivity(res) {
    haveDraw.value = res.data.box_goods
    uni.navigateTo({
      url: `/drawPage/integralDrawCards/index?thecard=${encodeURIComponent(
        JSON.stringify(haveDraw.value)
      )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
        currentradio.value
      }&case_id=${caseId.value}&money=${paymoney.value}&img=${
        boxDetailInfo.value.img
      }&name=${boxDetailInfo.value.name}&couponid=${couponId.value}&order_id=${
        res.data.order_id
      }&&energy_info=${JSON.stringify(res.data.energy_info)}&is_flip=${
        res.data.is_flip
      }`,
    })
  }
  function goRealName() {
    namepopup.value.open('center')
    uni.navigateTo({
      url: '/minePage/authentication/index',
    })
  }
  // 获取订单id
  const orderId = ref()
  const namepopup = ref()

  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  const paying = ref(1)

  //跳转无限抽卡
  const caseId = ref(-1)

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${blindboxId.value}&couponid=${couponId.value}`,
    })
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    // console.log(res)
    ruleStrings.value = res.data.details
  }

  const showGuide = ref(true)
  const guideBG = ref('')
  const guideId = ref([10, 11, 12, 13, 14])
  const guideList = ref([])
  async function getGuideBG() {
    const res = await http.request({
      url: '/api/index/getGuidance',
      method: 'POST',
      data: {
        id: guideId.value,
      },
    })
    // console.log(res)
    guideList.value = res.data
    guideBG.value = res.data[0].img
  }

  const guideIndex = ref(0)

  function nextGuide() {
    const userCodeStore = useUsercodeStore()
    ++guideIndex.value
    // console.log(guideIndex.value)
    if (guideIndex.value > 4) {
      showGuide.value = false
      userCodeStore.setFirstWX(1)
      return
    }
    guideBG.value = guideList.value[guideIndex.value].img
  }
  // 刷新
  const x = ref(10000)
  const y = ref(300)
  const refreshFlag = ref(true)
  const current = ref(0)
  const openRewardList = ref([])
  const ccRewardList = ref([])
  function refresh() {
    // console.log('zou')
    if (refreshFlag.value) {
      refreshFlag.value = false
      setTimeout(() => {
        refreshFlag.value = true
      }, 5000)
      // console.log(current.value)
      if (current.value == 1) {
        prizePage.value = 1
        prizeFlag.value = true
        openRewardList.value = []
        openReward()
      } else if (current.value == 2) {
        ccPage.value = 1
        ccFlag.value = true
        ccRewardList.value = []
        ccReward()
      } else {
        openRewardList.value = []
        ccRewardList.value = []
        getblindboxDetail()
      }
    } else {
      uni.utils.toast('慢点~我还没准备好呢')
    }
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }
  function returnAddTime(item) {
    return dayjs(item * 1000).format('MM/DD HH:mm')
    // console.log(dayjs())
  }
  onShareAppMessage(() => {
    const userCodeStore = useUsercodeStore()
    const user = userCodeStore.usercode.user
    return {
      title: `${boxDetailInfo.value.name} | ${boxDetailInfo.value.price}一抽`,
      path: `drawPage/integralDraw/index?pid=${user}&id=${blindboxId.value}`,
    }
  })
  onLoad((option) => {
    blindboxId.value = option.id
    const pid = option.pid
    uni.setStorageSync('pid', pid)
    if (userCodeStore.usercode.firstWX == 1 || !userCodeStore.usercode.user) {
      showGuide.value = false
    } else {
      getGuideBG()
    }
  })

  onShow(() => {
    clearInterval(intervalId)
    getblindboxDetail()
    uni.$once('thecoupon', (data) => {
      // console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 2) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 3) {
          realmoney.value = Number(
            (paymoney.value * data.coupon.discount).toFixed(2)
          )
        }
      }
    })
  })
</script>

<template>
  <view
    class="guide"
    v-if="showGuide"
    :style="'background-image:url(' + guideBG + ')'"
    @click="nextGuide"
  >
  </view>
  <view class="wx-content" v-else>
    <scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh">
      <view class="" style="padding-bottom: 214rpx; padding-top: 32rpx">
        <view v-if="is_khOpen" class="kh_Box">
          <view class="kh_BoxItem">
            剩余时间：<span style="font-size: 30rpx; font-weight: 500">{{
              timeTxt(timeValue)
            }}</span>
          </view>
          <view class="kh_BoxItem">
            狂欢剩余发数：<span style="font-size: 28rpx; font-weight: 500">
              {{ boxDetailInfo.s_fa }} 发</span
            >
          </view>
        </view>
        <view
          class="wx-barrage"
          v-if="barrageTopInfo.length != 0 && !is_khOpen"
        >
          <view class="barrage-content">
            <view class="barrage-top">
              <view
                class="barrage-item"
                v-for="(item, index) in barrageTopInfo"
                :key="'topbarrage' + index"
              >
                <image
                  style="
                    width: 41rpx;
                    height: 41rpx;
                    border-radius: 50%;
                    margin-right: 8rpx;
                  "
                  :src="item.himg"
                  mode=""
                ></image>
                <text class="wx-goodsname">{{
                  `${item.nickname[0]}***抽中了${item.goods_name}`
                }}</text>
              </view>
            </view>
            <view class="barrage-bottom">
              <view
                class="barrage-item"
                v-for="(item, index) in barrageTopInfo"
                :key="'bottombarrage' + index"
              >
                <image
                  style="
                    width: 41rpx;
                    height: 41rpx;
                    border-radius: 50%;
                    margin-right: 5rpx;
                  "
                  :src="item.himg"
                  mode=""
                ></image>
                <text>{{
                  `${item.nickname[0]}***抽中了${item.goods_name}`
                }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="wx-top-content">
          <view class="rules" @click="rulePOP"> 规则 </view>
          <view class="wx-history" @click="wxHistory">出奖记录</view>
          <view class="my-reward" @click="toMyReward"> </view>
          <view class="content-top"> {{ boxDetailInfo.name }} </view>
          <view class="content-list">
            <view class="left">
              <image
                :src="threeAction[0].img"
                style="width: 100rpx; height: auto"
                mode="widthFix"
              ></image>
              <view class="left-name">
                <uni-notice-bar
                  :speed="10"
                  color="#3d3d3d"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[0].goods_name"
                />
              </view>
            </view>
            <view class="center">
              <image
                :src="threeAction[1].img"
                style="width: 150rpx; height: auto"
                mode="widthFix"
              ></image>
              <view class="center-name">
                <uni-notice-bar
                  :speed="10"
                  color="#3D3D3D"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[1].goods_name"
                />
              </view>
            </view>
            <view class="right">
              <image
                :src="threeAction[2].img"
                style="width: 100rpx; height: auto"
                mode="widthFix"
              ></image>
              <view class="right-name">
                <uni-notice-bar
                  :speed="10"
                  color="#3D3D3D"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[2].goods_name"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="wx-center-content">
          <!-- <view class="top-text"> </view> -->
          <view class="bottom-text">
            <text>总No.{{ boxDetailInfo.no_get.no_get }}</text>
            <text>100%中奖</text>
            <text>{{
              `价值${Number(boxDetailInfo.min_price).toFixed(2)}~${Number(
                boxDetailInfo.max_price
              ).toFixed(2)}元`
            }}</text>
          </view>
        </view>
        <!-- <view class="probability"> - 各款式获得概率 - </view> -->
        <view class="scroll-probability">
          <view class="scroll-H-view">
            <scroll-view class="scroll-view_H" scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(item, index) in showProbality"
                :key="'probality' + index"
                :class="{
                  'chuanshuo-color': item.id == 1,
                  'shishi-color': item.id == 2,
                  'xiyou-color': item.id == 3,
                  'putong-color': item.id == 4,
                }"
              >
                <text class="probability-top">
                  {{ Object.keys(item)[0] }}
                </text>
                <text class="probability-bottom">
                  {{ item[Object.keys(item)[0]] + '%' }}
                </text>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="scroll-content">
          <!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
          <view class="scroll-Y-view">
            <view
              v-for="(item, index) in goodsList"
              :key="'goodslist' + item.goods_id + index"
              @click="goodsinfo(index)"
              class="scroll-view-item"
              :class="{
                'orange-bg': item.rule_id == '1',
                'pink-bg': item.rule_id == '2',
                'blue-bg': item.rule_id == '3',
                'white-bg': item.rule_id == '4',
              }"
            >
              <image
                style="height;: auto;width: 130rpx;margin-top: 20rpx;"
                :src="item.img"
                mode="widthFix"
              ></image>
              <view class="goodslist-name">
                {{ item.goods_name }}
              </view>
              <view class="presale" v-if="item.goods_type == 1"> 预售 </view>
            </view>
          </view>
          <!-- </scroll-view> -->
        </view>
      </view>
    </scroll-view>
    <!-- 底部 -->
    <view class="wx-bottom">
      <view class="button-group" v-if="boxDetailInfo.pattern == 2">
        <view class="button" @click="payPOP(1)">
          <view class="button-top"> 一发入魂 </view>
          <view class="button-bottom">
            {{ boxDetailInfo.price * 1 }}
          </view>
        </view>
        <view class="button" @click="payPOP(3)">
          <view class="button-top"> 三连无双 </view>
          <view class="button-bottom">
            {{ boxDetailInfo.price * 3 }}
          </view>
        </view>
        <view
          :class="{ button: !is_khOpen ? true : false, kh_button: is_khOpen }"
          @click="payPOP(10)"
        >
          <view class="button-top"> 十连超神 </view>
          <view class="button-bottom">
            {{ boxDetailInfo.price * 10 }}
          </view>
        </view>
      </view>
      <view
        class="button-group"
        style="justify-content: center"
        v-if="boxDetailInfo.pattern == 1"
      >
        <view class="button" @click="payPOP(1)">
          <view class="button-top"> 一发入魂 </view>
          <view class="button-bottom">
            {{ (boxDetailInfo.price * 1).toFixed(2) }}分
          </view>
        </view>
      </view>
      <!-- <view class="abandon"> 未成年人禁止购买 </view> -->
    </view>
    <!-- 支付弹出层 -->
    <uni-popup ref="paypopup" type="bottom">
      <PayBox
        v-if="paypopupBool"
        is_integral="true"
        :couponname="couponname"
        :createOrderUrl="createOrderUrl"
        :realmoney="realmoney"
        :paymoney="paymoney"
        :couponId="couponId"
        :buyCount="buyCount"
        :blindboxId="blindboxId"
        @payReturnFun="payReturnFun"
        @chooseCoupon="chooseCoupon"
        :boxDetailInfo="boxDetailInfo"
      ></PayBox>
    </uni-popup>

    <infomask
      v-if="showmask"
      @close-mask="closeMask"
      :maskindex="maskindex"
      :thegoods="goodsList"
      :boxId="boxId"
    >
    </infomask>

    <!-- 规则弹出层 -->
    <uni-popup ref="rulepopup" type="bottom">
      <view class="rulepopup-content">
        <view
          class=""
          style="
            color: #3d3d3d;
            width: 100%;
            text-align: center;
            line-height: 128rpx;
          "
        >
          规则
        </view>
        <scroll-view scroll-y="true" style="height: 70vh">
          <view
            style="
              width: 94%;
              margin: 0 auto;
              color: #3d3d3d;
              padding-bottom: env(safe-area-inset-bottom);
            "
            class=""
          >
            <rich-text :nodes="ruleStrings"></rich-text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 出奖记录弹出层 -->
    <uni-popup ref="historypopup" type="bottom">
      <view class="historypopup-content">
        <view class="close-historypopup" @click="closeHistory"> </view>
        <view class="historypopup-content-title"> 出奖记录 </view>
        <view class="scroll-category">
          <view class="scroll-H-view">
            <scroll-view class="scroll-view_H" scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(item, index) in boxDetailInfo.ruleArr"
                :key="'history' + index"
                @click="getItemHistoryList(item.rule_id)"
                :class="{
                  chuanshuo: item.rule_id == 1,
                  shishi: item.rule_id == 2,
                  xiyou: item.rule_id == 3,
                  putong: item.rule_id == 4,
                }"
              >
                <!-- <text class="probability-top">
									{{ Object.keys(item)[0] }}
								</text>
								<text class="probability-bottom">
									{{ item[Object.keys(item)] + '%' }}
								</text> -->
                <view
                  class="history-aim"
                  :style="[
                    {
                      display: item.rule_id == currentId ? 'block' : 'none',
                    },
                  ]"
                >
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="history-list">
          <scroll-view
            scroll-y="true"
            class="scroll-Y"
            style="height: 61vh"
            @scrolltolower="historyListLower"
          >
            <view
              class="history-item"
              v-for="(item, index) in historyList"
              :key="'historylist' + index"
            >
              <view class="" style="display: flex; align-items: center">
                <image
                  :src="item.himg || ''"
                  style="
                    width: 94rpx;
                    height: 94rpx;
                    border-radius: 50%;
                    flex-shrink: 0;
                  "
                  mode=""
                ></image>
                <view style="margin-left: 16rpx">
                  <view class="" style="display: flex; align-items: center">
                    <text style="width: 120rpx"
                      >{{ item.nickname ? item.nickname[0] : '' }}****</text
                    >
                    <text
                      class="history-name"
                      style="width: 52%; font-size: 23rpx; margin-left: 20rpx"
                      >{{ item.goods_name }}</text
                    >
                  </view>
                  <view class="" style="display: flex; align-items: center">
                    <text
                      style="font-size: 20rpx; color: #746e8c; width: 120rpx"
                      >No:{{ item.no_get }}</text
                    >
                    <text
                      style="
                        font-size: 20rpx;
                        color: #746e8c;
                        margin-left: 20rpx;
                      "
                      >{{ returnAddTime(item.add_time) }}</text
                    >
                  </view>
                </view>
              </view>
              <image
                :src="item.goods_img"
                style="
                  width: 94rpx;
                  height: 94rpx;
                  border-radius: 10rpx;
                  flex-shrink: 0;
                "
                mode=""
              ></image>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
    <!-- 刷新 -->
    <movable-area class="movableArea">
      <movable-view
        :x="x"
        :y="y"
        direction="all"
        class="movableView"
        inertia="true"
        @click="refresh"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/newdesign/refresh3.png"
          mode=""
          style="width: 110rpx; height: 110rpx"
        ></image>
      </movable-view>
    </movable-area>

    <!-- 实名制出层 -->
    <uni-popup ref="namepopup" type="center">
      <view class="namepopup-content">
        <view class="namepopup-title"> 提示 </view>
        <view class="namepopup-content-tow">
          鉴于您是平台的优质用户，为了能给您提供更好的服务体验，请先完成实名制认证。</view
        >
        <view class="namepopup-button">
          <view class="" @click="namepopup.close('center')"> 再想一下 </view>
          <view class="" @click="goRealName"> 确认实名 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .abandon {
    width: 100%;
    margin-top: 30rpx;
    text-align: center;
    font-size: 22rpx;
    color: red;
  }
  .kh_button {
    width: 205rpx;
    height: 84rpx;
    padding-top: 9rpx;
    box-sizing: border-box;
    text-align: center;
    font-weight: 800;
    color: #383838 !important;
    border-radius: 8rpx;
    background: linear-gradient(
      45deg,
      rgb(242, 97, 94),
      rgb(234, 150, 104),
      rgb(251, 200, 2),
      rgb(174, 9, 43)
    );
    background-size: 400%;
    animation: gradientBackground 1.5s linear alternate infinite;
    .button-top {
      font-size: 30rpx;
      line-height: 40rpx;
    }

    .button-bottom {
      font-size: 22rpx;
      line-height: 22rpx;
    }
  }

  @keyframes gradientBackground {
    0% {
      transform: scale(1);
      background-position: 0%;
    }
    50% {
      transform: scale(1.02);
      background-position: 50%;
    }
    100% {
      transform: scale(1);
      background-position: 100%;
    }
  }
  .kh_Box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0rpx 34rpx 30rpx 34rpx;
    .kh_BoxItem {
      width: 320rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: linear-gradient(0deg, #a2eaf7, #dcf3ef);
      border-radius: 2rpx;
      border: 4rpx solid #8cf6ff;
      font-size: 24rpx;
      color: #000000;
      text-align: center;
    }
  }
  // 卡片背景
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/orange-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/pink-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/blue-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/white-bg2.png')
      no-repeat;
    background-size: contain;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
      /* 初始位置 */
    }

    100% {
      transform: translateX(-100%);
      /* 终点位置 */
    }
  }

  .guide {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .wx-content {
    height: 100vh;
    // background-color: #1a133f;
    background-image: linear-gradient(
      180deg,
      #f8ec8a,
      #f9ed8b,
      #ffefff 34%,
      #eaf7ff,
      #ffffff 41%
    );
    color: white;
    overflow: hidden;

    .wx-barrage {
      height: 124rpx;
      overflow: hidden;

      .barrage-content {
        height: 139rpx;
        animation: scroll 30s linear infinite;

        /* 滚动动画 */
        .barrage-top {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .barrage-item {
            margin-right: 51rpx;
            align-items: center;

            &:nth-child(2n) {
              background-color: rgba(198, 144, 251, 0.5);
            }

            &:nth-child(3n) {
              background-color: rgba(155, 233, 248, 0.6);
            }

            &:nth-child(4n) {
              background-color: rgba(252, 117, 248, 0.6);
            }
          }
        }

        .barrage-bottom {
          display: flex;
          align-items: center;

          .barrage-item {
            margin-left: 51rpx;
            background-color: rgba(247, 251, 139, 0.5);

            &:nth-child(2n) {
              background-color: rgba(243, 184, 115, 0.5);
            }

            &:nth-child(3n) {
              background-color: rgba(66, 46, 109, 0.5);
            }

            &:nth-child(4n) {
              background-color: rgba(251, 150, 224, 0.5);
            }
          }
        }

        .barrage-item {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          height: 48rpx;
          padding: 8rpx;
          box-sizing: border-box;
          border-radius: 24rpx;
          background-color: rgba(251, 150, 224, 0.5);

          text {
            font-size: 20rpx;
          }
        }
      }
    }

    .wx-top-content {
      position: relative;
      z-index: 1;
      height: 402rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-content2.png')
        no-repeat;
      background-size: 100%;

      .rules {
        position: absolute;
        top: 28rpx;
        left: 38rpx;
        width: 63rpx;
        height: 31rpx;
        background-color: #ffec53;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        text-align: center;
        color: #3d3d3d;
      }

      .wx-history {
        position: absolute;
        top: 68rpx;
        left: 36rpx;
        width: 106rpx;
        height: 43rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/wx-history2.png')
          no-repeat;
        background-size: contain;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 43rpx;
        font-weight: 700;
        color: #3d3d3d;
        text-align: center;
      }

      .my-reward {
        position: absolute;
        top: -32rpx;
        right: 18rpx;
        width: 133rpx;
        height: 133rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/my-gift2.png')
          no-repeat;
        background-size: contain;
      }

      .content-top {
        font-size: 40rpx;
        line-height: 90rpx;
        font-weight: 800;
        text-align: center;
        font-style: italic;
        color: #3d3d3d;
        padding-top: 13rpx;
        text-shadow: 2px 2px 2px #ffee8b;
      }

      .content-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 71%;
        padding: 0 20rpx;
        color: #3d3d3d !important;

        ::v-deep .uni-noticebar {
          height: 25rpx;
          // margin-top: 18rpx;

          .uni-noticebar__content-text {
            font-size: 14rpx;
          }
        }

        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-left2.png')
            no-repeat;
          background-size: 100%;
          color: #3d3d3d;

          .left-name {
            position: absolute;
            left: 39rpx;
            bottom: 9rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-left2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
            color: #3d3d3d;
          }
        }

        .center {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 276rpx;
          height: 238rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-mid2.png')
            no-repeat;
          background-size: 100%;
          color: #3d3d3d;

          .center-name {
            position: absolute;
            left: 51rpx;
            bottom: 12rpx;
            width: 178rpx;
            height: 32rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-mid2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
            color: #3d3d3d;

            ::v-deep .uni-noticebar {
              height: 32rpx;
              // margin-top: 18rpx;

              .uni-noticebar__content-text {
                font-size: 20rpx;
              }
            }
          }
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-left2.png')
            no-repeat;
          background-size: 100%;

          .right-name {
            position: absolute;
            left: 39rpx;
            bottom: 9rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-left2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
          }
        }
      }
    }

    .wx-center-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      // top: -30rpx;
      z-index: 0;
      height: 76rpx;
      margin: 8rpx 0;
      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/mid-content2.png')
        no-repeat;
      background-size: 100%;

      .top-text {
        position: absolute;
        top: 106rpx;
        width: 436rpx;
        height: 40rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/center-content-title.png')
          no-repeat;
        background-size: 100%;
      }

      .bottom-text {
        position: absolute;
        top: 22rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 22rpx;
        color: #3d3d3d;

        text {
          &:nth-child(2) {
            display: inline-block;
            width: 116rpx;
            height: 32rpx;
            margin-right: 10rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/hundrend2.png')
              no-repeat;
            background-size: 100%;
            line-height: 28rpx;
            text-align: center;
            font-size: 20rpx;
            font-weight: normal;
            color: #3d3d3d;
          }
        }
      }
    }

    .probability {
      width: 100%;
      position: relative;
      top: -35rpx;
      text-align: center;
      font-size: 22rpx;
    }

    // 概率滑动
    .scroll-probability {
      .scroll-H-view {
        height: 76rpx;
        margin: 0 21rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/scroll-back2.png')
          no-repeat;
        background-size: 100% 84%;
        overflow: hidden;

        .scroll-view_H {
          white-space: nowrap;
          width: 96%;
          margin: 0 12rpx;

          .scroll-view-item_H {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 228rpx;
            height: 68rpx;
            text-align: center;
            // line-height: 86rpx;

            .probability-top {
              margin-right: 10rpx;
              font-size: 26rpx;
              font-weight: 500;
            }

            .probability-bottom {
              font-size: 22rpx;
              font-weight: 500;
            }
          }

          .chuanshuo-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pink.png')
              no-repeat;
            background-size: contain;
          }

          .shishi-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-orange.png')
              no-repeat;
            background-size: 100%;
          }

          .xiyou-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-blue.png')
              no-repeat;
            background-size: 100%;
          }

          .putong-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pt.png')
              no-repeat;
            background-size: 100%;
          }
        }
      }
    }

    // 内容滑动
    .scroll-content {
      // .scroll-Y {
      width: 100%;

      // height: 38vh;
      .scroll-Y-view {
        width: 100%;
        padding: 0rpx 5rpx 0rpx 5rpx;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        color: #3d3d3d;
        font-weight: 600;
        font-size: 23rpx;

        .scroll-view-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 224rpx;
          height: 265rpx;
          padding-top: 42rpx;
          padding-bottom: 10rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;

          // margin-right: 10rpx;
          &:nth-child(3n) {
            margin-right: 0;
          }

          .goodslist-name {
            width: 100%;
            height: 30rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            font-size: 20rpx;
            // background: rgba(255, 255, 255, 0.5);
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 超出部分用省略号表示 */
            white-space: normal;
            /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }

          .presale {
            position: absolute;
            top: 14rpx;
            right: 0rpx;
            width: 60rpx;
            height: 30rpx;
            // background-color: rgba(0, 0, 0, 0.2);
            font-size: 16rpx;
            text-align: center;
            line-height: 30rpx;
          }
        }
      }

      // }
    }

    .wx-bottom {
      position: fixed;
      bottom: 0;
      z-index: 99;
      height: 214rpx;
      width: 100%;
      // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/bottom2.png')
      // no-repeat;
      // background-size: 100%;

      .button-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16rpx;
        margin-top: 56rpx;
        box-sizing: border-box;

        .button {
          width: 205rpx;
          height: 84rpx;
          padding-top: 9rpx;
          box-sizing: border-box;
          background-color: pink;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button2.png')
            no-repeat;
          background-size: 100%;
          text-align: center;
          color: #1f1f1f;
          font-weight: 800;

          &:last-child {
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button-ten.png')
              no-repeat;
            background-size: 100%;
            color: #1f1f1f;
          }

          .button-top {
            font-size: 30rpx;
            line-height: 40rpx;
          }

          .button-bottom {
            font-size: 22rpx;
            line-height: 22rpx;
          }
        }
      }

      .abandon {
        width: 100%;
        margin-top: 30rpx;
        text-align: center;
        font-size: 22rpx;
        color: #3d3d3d;
      }
    }

    .rulepopup-content {
      height: 1117rpx;
      // background-color: #1a133f;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );
      color: #3d3d3d;
    }

    .historypopup-content {
      position: relative;
      height: 76vh;
      padding: 25rpx 34rpx;
      box-sizing: border-box;
      // background-color: #1a133f;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );

      .close-historypopup {
        position: absolute;
        top: 32rpx;
        right: 28rpx;
        width: 63rpx;
        height: 57rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/close.png')
          no-repeat;
        background-size: 100%;
      }

      .historypopup-content-title {
        margin-bottom: 50rpx;
        font-size: 44rpx;
        font-weight: 800;
        text-align: center;
        color: #1f1f1f;
        // font-style: italic;
        // text-shadow: 2px 2px 2px #7863ff;
      }

      .scroll-category {
        .scroll-H-view {
          height: 76rpx;
          // margin: 0 21rpx;
          box-sizing: border-box;
          // background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
          // 	no-repeat;
          // background-size: contain;
          overflow: hidden;

          .scroll-view_H {
            white-space: nowrap;
            height: 66rpx;
            width: 100%;

            .scroll-view-item_H {
              position: relative;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 172rpx;
              height: 48rpx;
              text-align: center;
              // line-height: 86rpx;

              .history-aim {
                position: absolute;
                bottom: -20rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 20rpx;
                height: 20rpx;
              }

              .probability-top {
                margin-right: 10rpx;
                font-size: 26rpx;
                font-weight: 500;
              }

              .probability-bottom {
                font-size: 22rpx;
                font-weight: 500;
              }
            }

            .chuanshuo {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-orange.png')
                no-repeat;
              background-size: contain;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-orange.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .shishi {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-pink.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-pink.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .xiyou {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-purple.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-purple.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .putong {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-blue.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-blue.png')
                  no-repeat;
                background-size: 100%;
              }
            }
          }
        }
      }

      .history-list {
        .history-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 120rpx;
          margin-bottom: 10rpx;
          padding: 0 14rpx;
          box-sizing: border-box;
          background-color: #fff;
          color: #3d3d3d;
          // background-color: #251d49;

          border-radius: 10rpx;
          font-size: 28rpx;

          .history-name {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 超出部分用省略号表示 */
            white-space: normal;
            /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }
        }
      }
    }
  }
  // 刷新
  .movableArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .movableView {
    pointer-events: auto;
    width: 110rpx;
    height: 110rpx;
    border-radius: 100%;
    // z-index: 999;
  }

  .namepopup-content {
    width: 600rpx;
    height: 404rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;

    .namepopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
      color: black;
    }

    .namepopup-content-tow {
      height: 164rpx;
      padding-top: 32rpx;
      box-sizing: border-box;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }

    .namepopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;

      // margin-top: 26rpx;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 700;
        line-height: 80rpx;

        &:first-child {
          border: 2rpx solid $all-color;
          background-color: #fff;
          color: $all-color;
        }
      }
    }
  }
</style>
